<script lang="ts">
import {defineComponent,h,type VNode,ref} from 'vue';
import {NGrid,NGi,NButton,NIcon,NSpace} from 'naive-ui';
import { DownOutlined, UpOutlined } from '@vicons/antd';

export default defineComponent({
  emits:['search','reset'],
  setup(_p,{slots,emit}){
    //是否折叠
    const isCollapse = ref<boolean>(false);
    //点击展开/收起按钮时
    const onClickCollapset = ():void=>{
      isCollapse.value = !isCollapse.value;
    }
    
    return ()=>{
      //查询按钮
      const searchBtn = h(NButton,{type:'info',onClick:()=>{emit('search')}},{default:()=>'查询'});
      //重置按钮
      const resethBtn = h(NButton,{onClick:()=>{emit('reset')}},{default:()=>'重置'});
      //展开/收起按钮
      const collapseBtn = h(NButton,{type:'primary',text:true,iconPlacement:'right',onClick:onClickCollapset},{default:()=>isCollapse.value?'展开':'收起',icon:()=>h(NIcon,{size:14},{default:()=>h(isCollapse.value?DownOutlined:UpOutlined)})});
      //使用n-space包裹三个按钮
      const btnBox = h(NSpace,{align:'center',justify:'end'},{default:()=>[searchBtn,resethBtn,collapseBtn]});
      //使用n-gi包裹插槽传入的组件，及上面的三个按钮
      const contet:VNode[] = (slots.default?.()||[]).map(item=>h(NGi,{},{default:()=>item}));
      contet.push(h(NGi,{suffix:true},{default:()=>btnBox}));
      //n-grid包裹上面的组件，输出渲染
      return h(NGrid,{responsive:'screen',cols:5,collapsed:isCollapse.value},{default:()=>contet})
    };
  }
});
</script>
<style lang="less" scoped>

</style>
